<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head th:include="blog/index/include_blog::header"></head>
<body>
	<div th:include="blog/index/include_blog::nav"></div>
	<!-- Page Header -->
	<header class="intro-header"
		style="background-image: url('/img/blog/home-bg.jpg')">
		<div class="container">
			<div class="row">
				<div class="col-lg-8 offset-lg-2 col-md-10 offset-md-1">
					<div class="site-heading">
						<h1>BootDo Blog</h1>
						<span class="subheading">布嘟开源博客</span>
					</div>
				</div>
			</div>
		</div>
	</header>

	<!-- Main Content -->
	<div class="container">
		<div class="row">
			<div class="col-lg-8 offset-lg-2 col-md-10 offset-md-1">
				<div id="incomeNum" class="post-preview"></div>
				<!-- Pager -->
				<div class="clearfix">
					<p id="flagLoaded" style="display: none; text-align: center;">已全部加载</p>
					<a id="flagLoad" class="btn btn-secondary float-right" href="javascript:void(0)" onclick="nextPage()">更早
						&rarr;</a>
				</div>
			</div>
		</div>
	</div>
	<hr>
	<div th:include="blog/index/include_blog::footer"></div>
	<script>
		var limit = 10;
		var currentPage = 0;
		var total;
		$(function() {
			bindList(0);
		});
		function nextPage(){
			bindList(currentPage*limit)
		}
		function bindList(offset) {
			$
					.ajax({
						url : 'blog/open/list?limit=10&offset=' + offset,
						method : 'get',
						dataType : 'json',
						success : function(data) {
							var rows = data.rows;
							total = data.total;
							var htmlText = "";
							for (i = 0; i < rows.length; i++) {
								htmlText += '<div class="post-preview">';
								htmlText += '<a href="/blog/open/post/'+rows[i].cid+'">';
								htmlText += '<h2 class="post-title">';
								htmlText += rows[i].title;
								htmlText += '</h2>';
								htmlText += '</a>';
								htmlText += '<p class="post-meta">作者：<a href="#">'
										+ rows[i].author
										+ '</a> &nbsp;&nbsp; '
										+ rows[i].gtmModified + '</p>';
								htmlText += '</div>';
								htmlText += '<hr>';
							}
							$("#incomeNum").append(htmlText);

							currentPage++;
							if (total <= currentPage * limit) {
								document.getElementById("flagLoaded").style.display = "block";
								document.getElementById("flagLoad").style.display = "none";
							}
						}
					});
		}
	</script>
</body>
</html>
